<!-- src/components/Cards/ActivityCard.vue -->
<template>
  <div class="activity-card" :style="cardStyle">
    <!-- 顶部按钮栏 -->
    <div class="card-header">
      <div class="header-buttons">
        <button class="header-button edit-button" @click="handleEdit" title="编辑">
          <svg class="button-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="currentColor"/>
          </svg>
          <span class="button-text">编辑</span>
        </button>
        <button class="header-button delete-button" @click="handleDelete" title="删除">
          <svg class="button-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="currentColor"/>
          </svg>
          <span class="button-text">删除</span>
        </button>
        <button class="header-button close-button" @click="handleClose" title="关闭">
          <span class="close-icon">×</span>
        </button>
      </div>
    </div>
    
    <!-- 内容区域 -->
    <div class="card-content">
      <!-- 标题栏 -->
      <div class="title-section">
        <div class="section-icon title-icon">
          <svg class="icon-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <!-- 日历事件图标 -->
            <path d="M19,3H18V1H16V3H8V1H6V3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,19H5V8H19V19Z" fill="currentColor"/>
            <path d="M7,10H12V15H7V10Z" fill="currentColor"/>
          </svg>
        </div>
        <div class="section-content">
          <div class="card-title">{{ cardData.title }}</div>
        </div>
      </div>
      
      <!-- 时间栏 -->
      <div class="time-section">
        <div class="section-icon time-icon">
          <svg class="icon-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z" fill="currentColor"/>
          </svg>
        </div>
        <div class="section-content">
          <div class="date-info">
            <!-- 全天事件显示完整日期时间 -->
            <template v-if="cardData.allDayLong">
              <div class="date-item">
                <span class="date-label">开始:</span>
                <span class="date-value">{{ formatAllDayStart(cardData.startDate) }}</span>
              </div>
              <div class="date-item">
                <span class="date-label">结束:</span>
                <span class="date-value">{{ formatAllDayEnd(cardData.startDate, cardData.endDate) }}</span>
              </div>
            </template>
            <!-- 非全天事件显示日期和单独的时间 -->
            <template v-else>
              <div class="date-item">
                <span class="date-label">日期:</span>
                <span class="date-value">{{ formatDateOnly(cardData.date) }}</span>
              </div>
              <div class="date-item">
                <span class="date-label">时间:</span>
                <span class="date-value">{{ formatTimeRange(cardData.beginTime, cardData.endTime) }}</span>
              </div>
            </template>
          </div>
        </div>
      </div>
      
      <!-- 地点栏（如果location不为空） -->
      <div class="location-section" v-if="cardData.location && cardData.location.trim() !== ''">
        <div class="section-icon location-icon">
          <svg class="icon-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" fill="currentColor"/>
          </svg>
        </div>
        <div class="section-content">
          <span class="location-text">{{ cardData.location }}</span>
        </div>
      </div>
      
      <!-- 备注栏（如果remark不为空） -->
      <div class="remark-section" v-if="cardData.remark && cardData.remark.trim() !== ''">
        <div class="section-icon remark-icon">
          <svg class="icon-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <!-- 便签/注释图标 -->
            <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" fill="currentColor"/>
            <path d="M8,12H16V14H8V12M8,16H13V18H8V16Z" fill="currentColor"/>
          </svg>
        </div>
        <div class="section-content">
          <span class="remark-text">{{ cardData.remark }}</span>
        </div>
      </div>
      
      <!-- 提醒栏 -->
      <div class="reminder-section">
        <div class="section-icon reminder-icon">
          <svg class="icon-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12,2A1,1 0 0,1 13,3V4.08C15.84,4.56 18,7.03 18,10V16L21,19H3L6,16V10C6,7.03 8.16,4.56 11,4.08V3A1,1 0 0,1 12,2M10,20H14A2,2 0 0,1 12,22A2,2 0 0,1 10,20Z" fill="currentColor"/>
          </svg>
        </div>
        <div class="section-content">
          <span class="reminder-text">前一天 下午5点</span>
        </div>
      </div>
      
      <!-- 归属栏 -->
      <div class="owner-section">
        <div class="section-icon owner-icon">
          <svg class="icon-svg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" fill="currentColor"/>
          </svg>
        </div>
        <div class="section-content">
          <span class="owner-text">Hypno-Shroom</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElMessage } from 'element-plus'
import type { activityCard } from '@/types/card'

interface Props {
  cardData: activityCard
  position?: {
    x: number
    y: number
  }
}

interface Emits {
  (e: 'close'): void
  (e: 'delete', id: string): void
  (e: 'edit', card: activityCard): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 计算卡片样式（包含边界检查）
const cardStyle = computed(() => {
  if (!props.position) return {}
  
  const cardWidth = 320
  // 动态计算高度，根据是否有location和remark
  let cardHeight = 300 // 基础高度（增加了标题和时间分离）
  if (props.cardData.location && props.cardData.location.trim() !== '') cardHeight += 48
  if (props.cardData.remark && props.cardData.remark.trim() !== '') cardHeight += 48
  
  const margin = 10
  
  let adjustedX = props.position.x
  let adjustedY = props.position.y
  
  // 水平方向边界检查
  if (adjustedX + cardWidth > window.innerWidth) {
    adjustedX = window.innerWidth - cardWidth - margin
  }
  if (adjustedX < margin) {
    adjustedX = margin
  }
  
  // 垂直方向边界检查
  if (adjustedY + cardHeight > window.innerHeight) {
    adjustedY = window.innerHeight - cardHeight - margin
  }
  if (adjustedY < margin) {
    adjustedY = margin
  }
  
  return {
    left: `${adjustedX}px`,
    top: `${adjustedY}px`
  }
})

const pad2 = (value: number) => value.toString().padStart(2, '0')

// 格式化日期显示（完整日期时间）
const formatDate = (date: Date): string => {
  const year = date.getFullYear()
  const month = pad2(date.getMonth() + 1)
  const day = pad2(date.getDate())
  const hours = pad2(date.getHours())
  const minutes = pad2(date.getMinutes())
  
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

// 格式化日期显示（仅日期）
const formatDateOnly = (date: Date): string => {
  const year = date.getFullYear()
  const month = pad2(date.getMonth() + 1)
  const day = pad2(date.getDate())
  
  return `${year}-${month}-${day}`
}

// 格式化时间显示（仅时间）
const formatTimeOnly = (date: Date): string => {
  const hours = pad2(date.getHours())
  const minutes = pad2(date.getMinutes())
  
  return `${hours}:${minutes}`
}

const formatAllDayStart = (start: Date) => {
  const date = new Date(start)
  const year = date.getFullYear()
  const month = pad2(date.getMonth() + 1)
  const day = pad2(date.getDate())
  return `${year}-${month}-${day} 00:00`
}

const formatAllDayEnd = (start: Date, end: Date) => {
  const startDate = new Date(start)
  const endDate = new Date(end)
  const duration = endDate.getTime() - startDate.getTime()
  const oneDay = 24 * 60 * 60 * 1000

  if (duration === oneDay) {
    const year = startDate.getFullYear()
    const month = pad2(startDate.getMonth() + 1)
    const day = pad2(startDate.getDate())
    return `${year}-${month}-${day} 24:00`
  }

  return formatDate(endDate)
}

// 格式化时间范围
const formatTimeRange = (beginTime?: Date, endTime?: Date): string => {
  if (!beginTime || !endTime) {
    return '时间未设置'
  }
  
  const begin = formatTimeOnly(beginTime)
  const end = formatTimeOnly(endTime)
  
  return `${begin} ~ ${end}`
}

// 处理编辑
const handleEdit = () => {
  emit('edit', props.cardData)
}

// 处理删除
const handleDelete = () => {
  emit('delete', props.cardData.id)
}

// 处理关闭
const handleClose = () => {
  emit('close')
}
</script>

<style scoped>
.activity-card {
  position: fixed;
  width: 320px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 16px;
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.12),
    0 2px 10px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.8);
  z-index: 1001;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.activity-card:hover {
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.16),
    0 4px 20px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

/* 顶部按钮栏 */
.card-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: linear-gradient(to bottom, rgba(248, 250, 252, 0.9), rgba(241, 245, 249, 0.7));
  backdrop-filter: blur(8px);
}

.header-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.header-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  gap: 6px;
  min-height: 32px;
}

.header-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.close-button {
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
  border: 1px solid rgba(100, 116, 139, 0.2);
  padding: 6px;
  min-width: 32px;
}

.close-button:hover {
  background: rgba(100, 116, 139, 0.2);
  color: #475569;
  border-color: rgba(100, 116, 139, 0.3);
}

.edit-button {
  color: #0369a1;
  background: rgba(3, 105, 161, 0.08);
  border: 1px solid rgba(3, 105, 161, 0.2);
}

.edit-button:hover {
  background: rgba(3, 105, 161, 0.15);
  border-color: rgba(3, 105, 161, 0.3);
}

.delete-button {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.delete-button:hover {
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.3);
}

.button-svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.header-button:hover .button-svg {
  transform: scale(1.1);
}

.button-text {
  font-size: 12px;
  font-weight: 500;
}

.close-icon {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

/* 内容区域 */
.card-content {
  padding: 0;
}

/* 通用区域样式 */
.title-section,
.time-section,
.location-section,
.remark-section,
.reminder-section,
.owner-section {
  display: flex;
  align-items: flex-start;
  padding: 16px 20px;
  gap: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  transition: background-color 0.2s ease;
}

.title-section:hover,
.time-section:hover,
.location-section:hover,
.remark-section:hover,
.reminder-section:hover,
.owner-section:hover {
  background: rgba(241, 245, 249, 0.4);
}

.title-section,
.time-section {
  align-items: flex-start;
}

.location-section,
.remark-section,
.reminder-section,
.owner-section {
  align-items: center;
}

/* 图标样式 */
.section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.icon-svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.section-icon:hover .icon-svg {
  transform: scale(1.1);
}

/* 更新图标配色 */
.title-icon {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.time-icon {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.location-icon {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.remark-icon {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.reminder-icon {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.owner-icon {
  background: linear-gradient(135deg, #64748b, #475569);
  color: white;
  box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
}

/* 内容区域样式 */
.section-content {
  flex: 1;
  min-width: 0;
}

.card-title {
  font-size: 17px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.date-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.date-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.date-label {
  font-size: 12px;
  color: #64748b;
  min-width: 42px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.date-value {
  font-size: 13px;
  color: #334155;
  font-weight: 500;
  background: rgba(241, 245, 249, 0.6);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.location-text,
.remark-text,
.reminder-text,
.owner-text {
  font-size: 14px;
  color: #334155;
  line-height: 1.5;
  font-weight: 500;
}

.remark-text {
  color: #475569;
  line-height: 1.5;
}

/* 最后一个区域去掉边框 */
.owner-section {
  border-bottom: none;
}

/* 响应式调整 */
@media (max-width: 480px) {
  .activity-card {
    width: 300px;
    border-radius: 14px;
  }
  
  .card-header {
    padding: 14px 16px 10px;
  }
  
  .title-section,
  .time-section,
  .location-section,
  .remark-section,
  .reminder-section,
  .owner-section {
    padding: 14px 16px;
    gap: 12px;
  }
  
  .section-icon {
    width: 32px;
    height: 32px;
  }
  
  .icon-svg {
    width: 16px;
    height: 16px;
  }
}
</style>